<template>
  <div class="msg4">
    <p>图片懒加载</p>
    <ol>
      <li v-for="item in list">
        <img v-lazy="item.imgUrl" alt="">
      </li>
    </ol>
    <back-top></back-top>
  </div>
</template>
<style lang="scss">
  .msg4 {
    width: 100%;
    padding-top: 40px;
    p {
      text-align: center;
      font-size: 15px;
    }
    ol {
      width: 100%;
      li {
        display: block;
       img{
         width: 100%;
       }
      }
    }
  }
</style>
<script>
  import backTop from '../content/backToTop.vue'
  export default {
    name: 'Message4',
    data() {
      return {
        list: [
          {
            imgUrl: require('./image/1.jpeg'),
          },
          {
            imgUrl: require('./image/2.jpeg'),
          },
          {
            imgUrl: require('./image/3.jpeg'),
          },
          {
            imgUrl: require('./image/4.jpeg'),
          },
          {
            imgUrl: require('./image/5.jpeg'),
          },
          {
            imgUrl: require('./image/6.jpeg'),
          }
        ]
      }
    },
    components:{
      backTop
    }
  }
</script>
